<template>
	<div id="left-nav">
		<el-menu 
			:default-active="activeIndex"
		  	:collapse="isCollapse"
			background-color="#fff"
			text-color="#383838"
			@select='handleSelect'
			active-text-color="#d4f3ff">
	      	<el-submenu index="3">
	      		 <template slot="title">
			          <i class="el-icon-menu"></i>
			          <span>测试工具</span>
			        </template>
            <router-link to="/main/test/single">
              <el-menu-item index="/main/test/single" :class="{'actives':path=='/main/test/single'}" style="margin-top: 10px;padding: 0 53px;">
                接口测试
              </el-menu-item>
            </router-link>
            <router-link to="/main/test/useCase">
              <el-menu-item index="/main/test/useCase" :class="{'actives':path=='/main/test/useCase'}" style="padding: 0 53px;">
                用例管理
              </el-menu-item>
            </router-link>
            <router-link to="/main/test/integrate">
              <el-menu-item index="/main/test/integrate" :class="{'actives':path=='/main/test/integrate'}" style="padding: 0 53px;">
                集成测试
              </el-menu-item>
            </router-link>
	      	</el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>配置管理</span>
        </template>
        <router-link to="/main/test/config">
          <el-menu-item index="/main/test/config" :class="{'actives':path=='/main/test/config'}" style="padding: 0 53px;">系统配置</el-menu-item>
        </router-link>
        <router-link to="/main/test/time">
          <el-menu-item index="/main/test/time" :class="{'actives':path=='/main/test/time'}" style="padding: 0 53px;">超时配置</el-menu-item>
        </router-link>
        <router-link to="/main/test/history">
          <el-menu-item index="/main/test/history" :class="{'actives':path=='/main/test/history'}" style="padding: 0 53px;">历史纪录配置</el-menu-item>
        </router-link>
      </el-submenu>
	    </el-menu>  	
		  <el-radio-group v-model="isCollapse"  class="collapse" :style="rightW">
	        <el-radio-button class="el-radio-button-active" ref="zk" :label="false" v-if="isCollapse">展开</el-radio-button>
	        <el-radio-button :label="true" v-if="!isCollapse">收起</el-radio-button>
	    </el-radio-group>
	</div>
</template>
<script>
	export default{
		data(){
			return {
	 			activeIndex:'',
	 			isCollapse:false,
	 			rightW:'',
	 			path:'',
	 		}
		},
		props:['dataList'],
		created(){
			this.getPathName()
			
		},
		watch:{
			isCollapse:'systemLeftWidth',
			path:'activeNav',
		},
		methods:{
			handleSelect(key,keyPath){
//		       this.$router.push({path:key})
				console.log(key,keyPath)
		       this.path=key
		    },
		    getPathName(){
		    	this.path=this.$route.path
		    },
		    systemLeftWidth(){
		    	this.$emit('collapse',this.isCollapse)
		    	if(!this.isCollapse){
					this.rightW='right:-18px!important;'
				}else{
					this.rightW='right:-19px!important;'
				}
		    },
		    activeNav(){
		    	this.activeIndex = this.path
		    }
		}
	}
</script>
<style>
	.el-submenu__title:focus, .el-submenu__title:hover{background-color: rgb(213,243,254)!important;}
	.is-opened .el-submenu__title{background-color:rgb(84,209,255)!important;color:#fff!important;}
	.is-opened .el-submenu__title i{color:#fff;}
</style>
<style scoped>
	#left-nav{}
	.el-menu{border-right:none;}
	.el-menu .el-menu-item.active{background-color: #54d1ff!important;color:#fff!important;}
	.el-menu .el-menu-item.actives{background-color: #fff!important;color:#54d1ff!important;}
	.el-menu .el-menu-item.actives i{color:#fff;}
	/* .el-submenu .active{background-color:#fff!important;color:#54d1ff!important;} */
	.el-submenu .el-menu-item{min-width:100%;color:#54d1ff;}
	/* .el-submenu .el-menu-item:hover{background-color:rgb(213,243,254);} */
	.el-menu-item.active i{color:#fff;}
	.collapse{position: absolute;top:50%;right:-18px;width:18px;height: 68px;overflow: hidden;}
    .el-radio-button{width:18px;height: 68px;background:url(../../assets/img/c.png);
      position: relative;
      }
    .el-radio-button:before{content:'<';position: absolute;width:18px;height:20px;color:#fff;top:50%;left:0;font-size:16px;margin-top: -10px;
      line-height: 20px;text-align:center;font-family: '宋体';font-weight: 900;}
   .el-radio-button-active:before{content:'>';position: absolute;width:18px;height:20px;color:#fff;top:50%;left:0;font-size:16px;margin-top: -10px;
      line-height: 20px;text-align:center;font-family: '宋体';font-weight: 900;}
    .el-menu-item:focus, .el-menu-item:hover{background-color: rgb(213,243,254)!important;}  
    
</style>
